<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>图书详情</title>

  <link href="../css/bootstrap.css" rel="stylesheet"/>
  <link href="../css/all.css" rel="stylesheet"/>
  <link href="../css/index.css" rel="stylesheet"/>
  <link href="../css/swiper-3.4.2.min.css" rel="stylesheet"/>
  <link href="../layui/css/layui.css" rel="stylesheet"/>
  <link rel="stylesheet" href="../css/layui.css" media="all"/>
  <script src="http://at.alicdn.com/t/font_631371_o7qxle1nebmg3nmi.js"></script>
  <script src="../js/jquery-2.0.3.min.js"></script>
  <script src="../js/swiper-3.4.2.min.js"></script>
  <script type="text/javascript" src="../js/jquery.flexText.js"></script>
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script type="text/javascript">
  /*<![CDATA[*/
  $().ready(function(){
  	var bookId=$('#bookId').val();
  	getOneBook(bookId);
  	getCountComment(bookId);
  })
  
  function getOneBook(id){
    	$.ajax({
            url: "/api/book/"+id,
            type: "GET",
            success: function (data) {
            	if(data!=""){
            		$("#bookimg").attr('src',data.bookpicture); 
            		$("#booknameDiv").html("<h1>"+data.bookname+"</h1>");
            		var ahtml="";
            		ahtml+="<p>作者：<a href=''>"+data.bookauthor+"</a></p>";
            		ahtml+="<p>出版社：<a href=''>"+data.bookpress+"</a></p>";
            		ahtml+="<p>类型：<a href=''>"+data.type.typename+"</a></p>";
            		var amount;
            		if(data.bookamount<0){//存在共享者取回情况
            			amount = 0;
            		}else{
            			amount = data.bookamount;
            		}
            		ahtml+="<p>库存："+amount+"</p><p>总借出："+data.bookborrow+"</p><p>上架时间："+data.bookshelvetime+"</p>";
            		if(data.bookowner!=""&&data.bookowner!=null){
            			ahtml+="<p>共享者："+data.bookowner+"</p>";
            		}
            		$("#bookinfoDiv").html(ahtml);
            		$("#bookreamrkDiv").html("&nbsp;&nbsp;&nbsp;&nbsp;"+data.bookremark);
            	}else{
            		alert("没有这本书啊，大哥~");
            	}
            }
        });
    }
  
  //预加载评论数
  function getCountComment(bookid){
  	$.ajax({
  		url: "/comment/getCount",
  		data: {bookId:bookid},
  		type:"GET",
  		success: function (data) {
  			$("#myLi").html("用户书评[" +data + "]");
  		}
  	});
  	
  }
  
  //收藏
  function collect(){
    var bookid=$('#bookId').val(); 
  	$.ajax({
          url: "/library/collectBook",
          data:{bookid:bookid},
          type: "POST",
          success: function (data) {
          	alert(data);
          }
  	});
  }  
  
  //借阅
  function borrow(){
  	var bookId=$('#bookId').val();
  	$.ajax({
          url: "/borrow/toBorrow",
          data:{bookId:bookId,amount:1},
          type: "POST",
          success: function (data) {
          	if(data.rspCode=="000109"){
          		alert(data.rspMsg);
          		location.href="../login";
          	}else if(data.rspCode=="000000"){
          		alert("请牢牢记住取书码："+data.data+",凭取书码到书库取书！");
          	}else if(data.rspCode=="999999"){
          		alert("未知错误，请联系管理员！");
          	}else if(data.rspCode=="000114"){
          		alert("达到借阅上限!"+"您拥有借阅"+data.data.canBorrowNumber+"本图书的权限，目前在借阅图书数量为"+data.data.currentBorrowNumber);
          	}else if(data.rspCode=="000002"){
          		alert("该书库存仅剩"+data.data+"本");
          	}else{
          		alert(data.rspMsg);
          	}
          }
  	});
  }
  
  function selComment(){
	  var bookId=$('#bookId').val();
	  $.ajax({
  		url: "/comment/getBookComment",
  		data:{bookId:bookId},
  		type: "GET",
  		success: function (data){
  			if(data!=""){
          		var html="";
        		for(var obj in data){
        			if(data[obj].isShow==0){
        				data[obj].commentMsg="该评论已被删除";
        	    	}
        			html+="<div class='comment-show-con clear-f' commentId="+data[obj].id+">";
        			html+="<div class='comment-show-con-img fl'><img src='"+data[obj].user.headImg+"' alt='用户头像'/></div>";
        			html+="<div class='comment-show-con-list fl clear-f'>";
        			html+="<div class='pl-text clear-f'><a href='#' class='comment-size-name'>"+data[obj].user.nickname+" : </a>";
        			html+="<span class='my-pl-con'>&nbsp;"+data[obj].commentMsg+"</span></div>";
        			html+="<div class='date-dz clear-f'><span class='date-dz-left fl comment-time'>"+data[obj].addTime+"</span>";
        			html+="<div class='date-dz-right fr comment-pl-block clear-f'>";
        			if(data[obj].isCurrentUserComment!=""&&data[obj].isCurrentUserComment!=null&&data[obj].isShow!=0){
        				html+="<a href='javascript:;' class='removeBlock'>删除</a>";
        			}else{
        				html+="<a href='javascript:;' class='removeBlock'></a>";
        			}
        			html+="<a href='javascript:;' class='date-dz-pl pl-hf hf-con-block fl'>回复(<i class='z-num'>"+data[obj].sonComments+"</i>)</a>";
        			html+="<span class='fl date-dz-line'>|</span>";
        			if(data[obj].isCurrentUserLike!=""&&data[obj].isCurrentUserLike!=null){
        				html+="<a href='javascript:;' class='date-dz-z fl date-dz-z-click'>";
        			}else{
        				html+="<a href='javascript:;' class='date-dz-z fl'>";
        			}
        			html+="<i class='date-dz-z-click-red'></i>赞 (<i class='z-num'>"+data[obj].likes+"</i>)</a>";
        			html+="</div></div><div class='hf-list-con'></div></div></div>";
        		}
        		$('#commentDiv').html(html);
  			}
  		}	
  	});	  
  }
  /*]]>*/
  </script>
</head>
<body>
  <div th:include="include :: header"></div>
  <input type="hidden" id="bookId" th:value="${bookId}"/>
  <div class="container clear-f container-top">
    <div class="book-detail">
      <div class="product-view row">
        <div class="left-content-product col-lg-9 col-xs-12">
          <div class="row">
            <div class="content-product-left class-honizol col-sm-5 col-xs-12 ">
              <div class="large-image">
                <img id="bookimg" itemprop="image" class="product-image-zoom" src=""
                  title="图书图片" alt="图书图片"/>
              </div>
            </div>
            <div class="content-product-right col-sm-7 col-xs-12">
              <div class="title-product" id="booknameDiv">
                <h1>慈善平台图书</h1>
              </div>
              &nbsp;
              <hr/>
              &nbsp;
              <div class="box-review form-group">
                <div class="ratings">
                  <div id="bookinfoDiv">
                    <p>作者：
                      <a href=""></a>
                    </p>
                    <p>出版社：
                      <a href=""></a>
                    </p>
                    <p>类型：
                      <a href=""></a>
                    </p>
                    <p>库存：</p>
                    <p>总借出：</p>
                    <p>上架时间：</p>
                  </div>
                </div>
              </div>
              <div class="book-operation">
                <li>
                  <a onclick="collect()">收藏</a>
                </li>
                <li>
                  <a onclick="borrow()">借阅</a>
                </li>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="layui-tab" lay-filter="myFilter">
                <ul class="layui-tab-title">
                  <li class="layui-this">图书简介</li>
                  <li id="myLi" onclick="selComment()">用户书评</li>
                </ul>
                <div class="layui-tab-content">
                  <div class="layui-tab-item layui-show" id="bookreamrkDiv">图书简介内容</div>
                  <div class="layui-tab-item book-comment-div">
                      <div class="commentAll">
                          <!--评论区域 begin-->
                          <div class="reviewArea clear-f">
                              <textarea class="content comment-input" placeholder="说点什么吧！&hellip;" onkeyup="keyUP(this)"></textarea>
                              <a href="javascript:;" class="plBtn">评论</a>
                          </div>
                          <!--评论区域 end-->
                          <!--回复区域 begin-->
                          <div class="comment-show" id="commentDiv">
                          	  <!-- 一个用户评论 -->
                              <div class="comment-show-con clear-f">
                                  <div class="comment-show-con-img fl">
                                      <img src="../img/portfolio/folio01.jpg" alt=""/>
                                  </div>
                                  <div class="comment-show-con-list fl clear-f">
                                      <div class="pl-text clear-f">
                                          <a href="#" class="comment-size-name">一本书的自述 : </a>
                                          <span class="my-pl-con">&nbsp;来啊 评论我啊!</span>
                                      </div>
                                      <div class="date-dz clear-f">
                                          <span class="date-dz-left fl comment-time">2018-1-1 00:00:00</span>
                                      </div>
                                      <div class="hf-list-con"></div>
                                  </div>
                              </div>
                          <!-- 一个用户评论end -->    
                          </div>
                          <!--回复区域 end-->
                      </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <section class="col-lg-3 hidden-sm hidden-md hidden-xs">
          <div class="borrow-sort">
            <iframe src="../page/borrowRank.html" height= "100%" width="100%"  frameborder="no" scrolling="No"  noresize="noresize" ></iframe>
          </div>
        </section>
      </div>
    </div>
  </div>

  <!-- footer Start -->
  <div th:include="include :: footer"></div>
  <!-- footer End -->

  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      pagination : '.swiper-pagination',
      paginationType : 'progress',
      autoplay: 2000,//可选选项，自动滑动
    })

    layui.use('element', function(){
      var element = layui.element;
    });
  </script>

  <script type="text/javascript" src="../js/comment.js"></script>
</body>

</html>
